<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>矩阵初等行变换</title>
    <style>
        table {
            border-collapse: collapse;
            margin: 20px;
        }
        td {
            border: 1px solid #000;
            padding: 10px;
            text-align: center;
        }
        input {
            width: 50px;
            text-align: center;
            user-select: none; /* 禁止文本选中 */
        }
        .highlight {
            background-color: yellow;
        }
        .mode-button {
            margin: 10px;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>矩阵初等行变换</h1>
    <div>
        <label for="rows">行数:</label>
        <input type="number" id="rows" min="1" value="3">
        <label for="cols">列数:</label>
        <input type="number" id="cols" min="1" value="3">
        <button id="create-matrix">生成矩阵</button>
    </div>
    <div>
        <button id="input-mode" class="mode-button">输入模式</button>
        <button id="operation-mode" class="mode-button">操作模式</button>
        <button id="one-click-mode" class="mode-button">一键模式</button>
    </div>
    <div id="matrix-container"></div>
    <script src="fraction.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            let matrix = [];
            let isInputMode = true;
            let isOneClickMode = false;
            let highlightedCell = null;
            let firstClickCell = null;
            resetHighlight();

            // 生成矩阵
            $("#create-matrix").click(function () {
                const rows = parseInt($("#rows").val());
                const cols = parseInt($("#cols").val());
                createMatrix(rows, cols);
                isInputMode = true;
                isOneClickMode = false;
                enableEditing();
                resetHighlight();
                resetFirstClick();
            });

            // 输入模式
            $("#input-mode").click(function () {
                isInputMode = true;
                isOneClickMode = false;
                enableEditing();
                resetHighlight();
                resetFirstClick();
            });

            // 操作模式
            $("#operation-mode").click(function () {
                isInputMode = false;
                isOneClickMode = false;
                disableEditing();
                resetHighlight();
                resetFirstClick();
            });

            // 一键模式
            $("#one-click-mode").click(function () {
                isInputMode = false;
                isOneClickMode = true;
                disableEditing();
                resetHighlight();
                resetFirstClick();
            });

            // 创建矩阵
            function createMatrix(rows, cols) {
                matrix = [];
                let html = "<table>";
                for (let i = 0; i < rows; i++) {
                    matrix[i] = [];
                    html += "<tr>";
                    for (let j = 0; j < cols; j++) {
                        html += `<td><input type="text" value="0" data-row="${i}" data-col="${j}"></td>`;
                        matrix[i][j] = Fraction.fromInt(0);
                    }
                    html += "</tr>";
                }
                html += "</table>";
                $("#matrix-container").html(html);
                attachInputHandlers(); // 绑定输入框事件
                attachCellClickHandler(); // 绑定单元格点击事件
            }

            // 启用编辑
            function enableEditing() {
                $("table input")
                    .prop("readonly", false)
                    .css("user-select", "auto") // 允许文本选中
                    .css("cursor", "text")
                    .off("mousedown") // 移除之前的 mousedown 事件
                    .on("focus", function () {
                        if ($(this).val() === "0") {
                            $(this).val(""); // 清空默认的 0
                        }
                    })
                    .on("blur", function () {
                        if ($(this).val() === "") {
                            $(this).val("0"); // 恢复为 0
                        }
                    })
                    .on("keydown", function (e) {
                        handleKeyNavigation(e, this); // 处理键盘导航
                    });
            }

            // 禁用编辑
            function disableEditing() {
                $("table input")
                    .prop("readonly", true)
                    .css("user-select", "none") // 禁止文本选中
                    .css("cursor", "default")
                    .off("focus") // 移除 focus 事件
                    .off("blur") // 移除 blur 事件
                    .off("keydown") // 移除 keydown 事件
                    .on("mousedown", function (e) {
                        e.preventDefault(); // 阻止输入框获得焦点
                        $(this).blur(); // 移除焦点
                    });
            }

            // 重置高亮
            function resetHighlight() {
                if(isInputMode) {
                    $("#input-mode").addClass("highlight");
                } else {
                    $("#input-mode").removeClass("highlight");
                }
                if(isOneClickMode) {
                    $("#one-click-mode").addClass("highlight");
                } else {
                    $("#one-click-mode").removeClass("highlight");
                }
                if(!isInputMode && !isOneClickMode) {
                    $("#operation-mode").addClass("highlight");
                } else {
                    $("#operation-mode").removeClass("highlight");
                }
                if (highlightedCell) {
                    $(highlightedCell).removeClass("highlight");
                    highlightedCell = null;
                }
            }

            // 重置第一次点击状态
            function resetFirstClick() {
                firstClickCell = null;
            }

            // 绑定输入框事件
            function attachInputHandlers() {
                $("table input")
                    .on("focus", function () {
                        if ($(this).val() === "0") {
                            $(this).val(""); // 清空默认的 0
                        }
                    })
                    .on("blur", function () {
                        if ($(this).val() === "") {
                            $(this).val("0"); // 恢复为 0
                        }
                    });
            }

            // 绑定单元格点击事件
            function attachCellClickHandler() {
                $("table input").click(function () {
                    if (isOneClickMode) {
                        handleOneClickMode(this);
                    } else if (!isInputMode) {
                        handleOperationMode(this);
                    }
                });
            }

            // 处理键盘导航
            function handleKeyNavigation(e, cell) {
                const key = e.key.toLowerCase();
                const row = parseInt($(cell).data("row"));
                const col = parseInt($(cell).data("col"));
                switch (key) {
                    case "a": // 左
                        moveFocus(row, col - 1);
                        break;
                    case "d": // 右
                        moveFocus(row, col + 1);
                        break;
                    case "w": // 上
                        moveFocus(row - 1, col);
                        break;
                    case "s": // 下
                        moveFocus(row + 1, col);
                        break;
                    default:
                        return; // 其他按键不处理
                }

                e.preventDefault(); // 阻止默认行为
            }

            // 移动焦点到指定位置
            function moveFocus(targetRow, targetCol) {
                const targetInput = $(`input[data-row="${targetRow}"][data-col="${targetCol}"]`);
                if (targetInput.length > 0) {
                    targetInput.focus();
                    targetInput[0].setSelectionRange(targetInput.val().length, targetInput.val().length); // 光标移到末尾
                }
            }

            // 处理一键模式
            function handleOneClickMode(cell) {
                const row = $(cell).data("row");
                const col = $(cell).data("col");
                const value = Fraction.fromString($(cell).val());

                if (value.iszero()) {
                    // 如果值为 0，忽略点击
                    return;
                }

                if (!firstClickCell) {
                    // 第一次点击
                    firstClickCell = cell;
                    highlightedCell = cell;
                    $(cell).addClass("highlight");
                } else {
                    if (cell === firstClickCell) {
                        // 第二次点击同一元素
                        const factor = Fraction.fromInt(1).div(value);
                        for (let j = 0; j < matrix[0].length; j++) {
                            const newValue = Fraction.fromString($(`input[data-row="${row}"][data-col="${j}"]`).val()).mul(factor);
                            $(`input[data-row="${row}"][data-col="${j}"]`).val(newValue.toString());
                        }

                        // 将该列其他元素变为 0
                        for (let i = 0; i < matrix.length; i++) {
                            if (i !== row) {
                                const otherValue = Fraction.fromString($(`input[data-row="${i}"][data-col="${col}"]`).val());
                                const factor = otherValue.neg().div(Fraction.fromString($(cell).val()));
                                for (let j = 0; j < matrix[0].length; j++) {
                                    const newValue = Fraction.fromString($(`input[data-row="${i}"][data-col="${j}"]`).val()).add(
                                        factor.mul(Fraction.fromString($(`input[data-row="${row}"][data-col="${j}"]`).val()))
                                    );
                                    $(`input[data-row="${i}"][data-col="${j}"]`).val(newValue.toString());
                                }
                            }
                        }

                        resetHighlight(); // 取消高亮
                        resetFirstClick(); // 重置点击状态
                    } else {
                        // 第二次点击其他元素，取消高亮并重置
                        resetHighlight();
                        resetFirstClick();
                    }
                }
            }

            // 处理操作模式
            function handleOperationMode(cell) {
                const row = $(cell).data("row");
                const col = $(cell).data("col");
                const value = Fraction.fromString($(cell).val());

                if (value === 0) {
                    // 如果值为 0，忽略点击
                    return;
                }

                if (highlightedCell) {
                    const prevRow = $(highlightedCell).data("row");
                    const prevCol = $(highlightedCell).data("col");

                    if (row === prevRow && col === prevCol) {
                        // 取消高亮
                        resetHighlight();
                    } else if (col === prevCol) {
                        // 初等行变换：使当前行的该列元素变为 0
                        const factor = value.neg().div(Fraction.fromString($(highlightedCell).val()));
                        for (let j = 0; j < matrix[0].length; j++) {
                            const newValue = Fraction.fromString($(`input[data-row="${row}"][data-col="${j}"]`).val()).add(
                                factor.mul(Fraction.fromString($(`input[data-row="${prevRow}"][data-col="${j}"]`).val()))
                            );
                            $(`input[data-row="${row}"][data-col="${j}"]`).val(newValue.toString());
                        }
                        resetHighlight();
                    }
                } else {
                    // 高亮当前单元格，并将该行除以当前元素的值，使当前元素变为 1
                    resetHighlight();
                    $(cell).addClass("highlight");
                    highlightedCell = cell;

                    const factor = Fraction.fromInt(1).div(value);
                    for (let j = 0; j < matrix[0].length; j++) {
                        const newValue = Fraction.fromString($(`input[data-row="${row}"][data-col="${j}"]`).val()).mul(factor);
                        $(`input[data-row="${row}"][data-col="${j}"]`).val(newValue.toString());
                    }
                }
            }
            
        });
    </script>
</body>
</html>